<template>
    <div class="head_top">
        <section  v-if="goBack" @click="backPath()">
            <svg viewBox="0 0 25 25" class="head_goback">
                <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
            </svg>
        </section>
        <section class="title_head ellipsis" v-if="headTitle">
            <span class="title_text">{{headTitle}}</span>
        </section>
    </div>
</template>

<script>
    export default {
        props: ['signinUp','headTitle', 'goBack', 'goPath'],
        methods: {
            backPath() {
                if(this.goPath) {
                    this.$router.push(this.goPath);
                }else {
                    this.$router.go(-1);
                }
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    @import "~@/styles/mixin.less";

    .head_top{
        background-color: @orange;
        position: fixed;
        z-index: 20;
        left: 0;
        top: 0;
        width: 100%;
        height: .35rem;
        .head_goback{
            left: 0.1rem;
            width: .2rem;
            height: .2rem;
            margin-left: .1rem;
            margin-top: .1rem;
        }
        .title_head{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            color: #fff;
            text-align: center;
            transform: translate(-50%, -50%);
            .title_text{
                font-size: .14rem;
                color: #fff;
                text-align: center;
                font-weight: bold;
            }
        }
    }
</style>